import { useState } from 'react'
import { Button, Popup, ResultPage } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { CheckCircleOutline } from 'antd-mobile-icons'
function Index() {
  const navigate = useNavigate()
  const [visible1, setVisible1] = useState(false)
  const details = [
    {
      label: '收款方',
      value: '张三',
      bold: true,
    },
    {
      label: '付款方式',
      value: '账户余额',
    },
    {
      label: '转账金额',
      value: '¥100.00',
    },
  ]
  return (
    <div>
      <ResultPage
        status='success'
        title='支付成功'
        description=''
        details={details}
        primaryButtonText='完成'
        onPrimaryButtonClick={() => setVisible1(true)}
      />
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
      >
        <div style={{ textAlign: 'center', margin: '10px 0' }}>
          <CheckCircleOutline fontSize={200} color='var(--adm-color-primary)' />
          <p style={{ padding: "10px", fontWeight: 'bold', fontSize: '16px' }}>预订成功</p>
        </div>
        <Button block color='success' size='large' onClick={() => navigate('/')}>确定</Button>
      </Popup>
    </div>
  )
}

export default Index
